import React, { useState, ReactNode } from 'react';

const slow = () => {
	return (
		<Com slow={<Slow />} slow2={<Slow2 />} ></Com>
	);
};

const Com = ({ slow, slow2 }: { slow: ReactNode & React.ComponentProps<typeof Slow>, slow2: ReactNode & React.ComponentProps<typeof Slow2>; }) => {
	const [count, setCount] = useState(0);
	return (
		<div title={count + ''}>
			<span>{count}</span>
			<button className='w-30 p-2 bg-red-400 text-white' onClick={() => setCount(count + 1)}>increase</button>
			{slow}
			<div className=' text-yellow-400 text-xs '>{count}</div>
			{slow2}
		</div>
	);
};

function Slow() {
	const now = performance.now();
	while ((performance.now() - now) < 1000) { }

	console.log('slow rended');
	return <div>Slow</div>;
}

function Slow2() {
	const now = performance.now();
	while ((performance.now() - now) < 1000) { }

	console.log('slow2 rended');
	return <div>Slow2</div>;
}

export default slow;